<template>
    <view class="files">
        <Navigation title="填写宠物档案" background="#fff" />
        <view class="f jc-c mt-40 w-f">
            <view class="w-160 h-160 head-box" @click="upload">
                <image src="http://cwht.ricecs.cn/app/login/ava.png" class="w-160 h-160 headImg" v-show="!headImg"></image>
                <image :src="headImg" class="w-160 h-160 headImg" v-show="headImg"></image>
                <image src="http://cwht.ricecs.cn/app/login/edit.png" class="w-44 h-44 edit"></image>
            </view>
        </view>
        <view class="form mt-40 ph-40">
            <u--form labelPosition="left" :model="model" ref="uForm" labelWidth="80" :labelStyle="{ fontSize: 32 }">
                <u-form-item label="昵称" prop="name" borderBottom>
                    <u--input v-model="model.name" border="none" placeholder="请输入萌宠名字" fontSize="16"></u--input>
                </u-form-item>
                <u-form-item label="重量" prop="name" borderBottom>
                    <view class="f jc-s-b">
                        <u-input v-model="model.name" border="none" placeholder="请输入整数金额" type="number" fontSize="16"> </u-input>
                        <view class="fs-32 text-color4">KG</view>
                    </view>
                </u-form-item>
                <u-form-item
                    label="种类"
                    prop="name"
                    borderBottom
                    @click="
                        showType = true;
                        hideKeyboard();
                    "
                >
                    <view class="f jc-s-b">
                        <u--input v-model="model.name" disabled disabledColor="#ffffff" placeholder="请选择萌宠种类" border="none"></u--input>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </u-form-item>
                <u-form-item
                    label="品种"
                    prop="name"
                    borderBottom
                    @click="
                        showBreed = true;
                        hideKeyboard();
                    "
                >
                    <view class="f jc-s-b">
                        <u--input v-model="model.name" disabled disabledColor="#ffffff" placeholder="请选择萌宠种类" border="none"></u--input>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </u-form-item>
                <u-form-item
                    label="出生日期"
                    prop="name"
                    borderBottom
                    @click="
                        showBirthday = true;
                        hideKeyboard();
                    "
                >
                    <view class="f jc-s-b">
                        <u--input v-model="model.name" disabled disabledColor="#ffffff" placeholder="请选择年/月/日" border="none"></u--input>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </u-form-item>
                <u-form-item
                    label="性别"
                    prop="name"
                    borderBottom
                    @click="
                        showSex = true;
                        hideKeyboard();
                    "
                >
                    <view class="f jc-s-b">
                        <u--input v-model="model.name" disabled disabledColor="#ffffff" placeholder="请选择年/月/日" border="none"></u--input>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </u-form-item>
                <u-form-item
                    label="是否绝育"
                    prop="name"
                    borderBottom
                    @click="
                        showSterilization = true;
                        hideKeyboard();
                    "
                >
                    <view class="f jc-s-b">
                        <u--input v-model="model.name" disabled disabledColor="#ffffff" placeholder="请选择年/月/日" border="none"></u--input>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </u-form-item>
            </u--form>
        </view>
        <view class="w-f h-136 f ph-40 bot-box pv-20 jc-s-b ai-c">
            <view>
                <image src="http://cwht.ricecs.cn/app/login/reset.png" class="w-40 h-40"></image>
                <view class="fs-24 text-color1">重置</view>
            </view>
            <view class="w-558"><u-button text="下一步" color="#FABB3C" shape="circle" @click="toNext"></u-button> </view>
        </view>
        <!-- 种类 -->
        <u-action-sheet :show="showType" :actions="typeList" title="请选择种类" @close="showType = false" @select="typeSelect"> </u-action-sheet>
        <!-- 品种 -->
        <u-action-sheet :show="showBreed" :actions="breedList" title="请选择品种" @close="showBreed = false" @select="breedSelect"> </u-action-sheet>
        <!-- 出生日期 -->
        <u-datetime-picker
            :show="showBirthday"
            v-model="model.birthday"
            mode="datetime"
            @confirm="showBirthday = false"
            @close="showBirthday = false"
        ></u-datetime-picker>
        <!-- 性别 -->
        <u-action-sheet :show="showSex" :actions="sexList" title="请选择性别" @close="showSex = false" @select="sexSelect"> </u-action-sheet>

        <!-- 是否绝育 -->
        <u-action-sheet
            :show="showSterilization"
            :actions="sterilizationList"
            title="请选择是否绝育"
            @close="showSterilization = false"
            @select="sterilizationSelect"
        >
        </u-action-sheet>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const headImg = ref<string>('');
const showType = ref(false);
const showBreed = ref(false);
const showBirthday = ref(false);
const showSex = ref(false);
const showSterilization = ref(false);
const typeList = ref([]);
const breedList = ref([]);
const sexList = ref([]);
const sterilizationList = ref([]);
const model = ref({
    name: '',
    birthday: '',
});

function upload() {
    uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res: any) {
            headImg.value = res.tempFilePaths;
        },
    });
}
function uploadFile(url: string) {
    uni.uploadFile({
        url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
        filePath: url,
        name: 'file',
        formData: {
            user: 'test',
        },
        success: (res: any) => {},
    });
}
function toNext() {
    uni.navigateTo({
        url: '/pages_login/wantToRaise',
    });
}
</script>
<style lang="scss" scoped>
.files {
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    .bot-box {
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        ::v-deep .u-button {
            height: 96rpx !important;
        }
    }
    .form {
        background: #fff;
    }
    .head-box {
        position: relative;
        .edit {
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .headImg {
            border-radius: 50%;
        }
    }
    ::v-deep .u-form-item__body {
        padding: 32rpx 0 !important;
    }
}
</style>
